
if (window.ActiveXObject || "ActiveXObject" in window) {

   $('body').addClass('ie')
   console.log("呜呜呜,我是ie")

} else {

    console.log("不是ie,爱你哦")

}


$(document).ready(function () {
    try {
        $('.count-up').countUp({
            time: 1300
        });

    } catch (error) {
        console.log("该页面无countUp动画！", error)
    }
    // 1000+
    // setInterval(function(){
    //     // $('.count-more').text('1000+')
    // },501)



    //  侧边栏点击事件
    $('aside.nav2-template > ul > li.has-children2 ul li i').click(function () {
        $(this).parent().children('ul').slideToggle()
        $(this).toggleClass('active--rotate-right')
    })




    //  导航条动画

    const top = $('header .index-page.nav-box').css('top')
    const currentScroll = $(this).scrollTop();


    // 下滑后刷新时的情况

    // PC端、不在顶部、滚动条下滑
    if ($(document).width() > 1210 && top != 0 + 'px' && currentScroll > 0) {
        const top = $('header .nav-box').addClass('top-0')
    }

    // 手机端
    if ($(document).width() < 1210 && top != 0 + 'px' && currentScroll > 0) {
        const top = $('header .index-page.nav-box').addClass('top-0')
        console.log('不是0')
    }



    // 导航栏滚动
    let p, t;

    $(document).scroll(function () {
        p = $(this).scrollTop();
        if (t <= p) {//下滚  
            if ($(this).scrollTop() < 10) {
                const top = $('header .index-page.nav-box').removeClass('top-0')
            }

            // .......  
            $('header .nav-box').removeClass('nav-set-top-40')
            $('header .nav-box').addClass('nav-set-top')
            $('header .nav-box').addClass('top-0')

        }

        else {//上滚  
            // .......
            console.log("上滚啦你")
            if (p == 0) {

                if ($(this).scrollTop() < 10) {
                    const top = $('header .index-page.nav-box').removeClass('top-0')
                    $('header .nav-box').removeClass('top-0')
                }


                if ($(document).width() < 1210) {
                    $('header .nav-box').removeClass('nav-set-top')
                    $('header .index-page.nav-box').addClass('nav-set-top-40')
                    console.log("手机端")

                } else {
                    $('header .nav-box').removeClass('nav-set-top')
                    $('header .nav-box').addClass('nav-set-top-40')
                    console.log("PC端")

                }


            }
        }
        t = p;   //更新上一次scrollTop的值      

    })


    // 导航条动画


    try {
        new WOW().init();



    } catch (error) {
        console.log("当前页面无wow,但是没关系", error)
    }

    // 小于1200开启jquery
    if ($(document).width() < 1300) {
        console.log('大于1200')
        // 导航栏样式
        // 一级栏显示二级栏
        $('ul.nav1>li .products-down').click(function () {

            console.log($(this))
            $(this).parent().children('.show-box').slideToggle(250)


        }

        )
    }

    if ($(document).width() > 1300) {
        console.log('大于1200')
        // 导航栏样式
        // 一级栏显示二级栏
        // $('ul.nav1>li').mouseenter(function () {
        //     $(this).children('.show-box').show(250)



        // })
        // $('ul.nav1>li').mouseleave(function () {
        //     $(this).children('.show-box').hide()


        // })


        // 二级栏显示三级栏
        $('.nav2-left>ul>li').click(function () {
            console.log(11)
            $(this).children('ul.nav3').slideToggle()
        })

        // 显示搜索按钮//隐藏搜索框
        $('header #search').click(function () {
            $('header .nav1').slideUp(250)
            $('header .search-input').slideDown(250)
            $('header #search').css("display", "none")
            $('header #searchClose').css("display", "flex")

            console.log(1)
        })

        $('header #searchClose').click(function () {
            $('header .nav1').slideDown(250)
            $('header .search-input').slideUp(250)
            $('header #searchClose').css("display", "none")
            $('header #search').css("display", "inline")
        })
        // , function () {

        // }

    } else {
        $('.mob-nav .fa-bars').click(function () {
            $('header .top-box .nav-box .right nav').slideToggle()
            $(this).css('display', 'none')
            $('.mob-nav .fa-close').css('display', 'inline-block')
        })

        $('.mob-nav .fa-close').click(function () {
            $('header .top-box .nav-box .right nav').slideToggle()
            $(this).css('display', 'none')
            $('.mob-nav .fa-bars').css('display', 'inline-block')

        })

        $('header .top-box .nav-box .right nav ul.nav1 > li > a').click(function () {
            $(this).parent().children('.show-box').slideToggle()
        })

        // 显示搜索按钮//隐藏搜索框
        $('.search-box').click(function () {
            // $('#searchInput').addClass('slideInRight')
            $('.search-input').slideDown(250)
            $("input").focus()
        })

        // $(".top-box").click(function(){
        //     $('.search-input').slideUp(250)

        //   });



        $(document).keyup(function (event) {
            if (event.keyCode == 13) {
                $('.search-input').slideUp(250)


            }
        });

        console.log('小于1200')
    }

    // about us 截取字符串
    // if ($(document).width() < 915) {
    //     console.log('915')
    //     let element = $('main.index section.about-us .block-box .content .top p:nth-of-type(1)')
    //     let txt = element.text()
    //     txt = txt.substring(0, 99) + '...'
    //     console.log(txt)
    //     element.text(txt)
    // }


    //knowledges页面  
    // aside第二套
    $('.has-children2 > a').click(function () {

        $('.has-children2>ul').slideToggle()
    })


    // 购物
    let shopCar = []

    if (JSON.parse(localStorage.getItem('shopCar')) == null) {
        localStorage.setItem('shopCar', JSON.stringify([]))

    }


    class ShopCar {
        constructor() {
            //  初始化设置勾选

            this.view()

            this.count()

            this.isNullView()
        }


        isNullView() {
            // 无列表隐藏
            let count = JSON.parse(localStorage.getItem('shopCar'))
            console.log(count.length)
            if (count == 0) {
                console.log("null")
                $('.shop-car').css('display', 'none')
            } else {
                $('.shop-car').css('display', '')
            }
        }
        addItem(id) {
            const that = this
            $.getJSON('./js/products.json', function (data) {

                this.data = data
                let target = this.data.find(function (item) {
                    return item.id == id
                })

                shopCar = JSON.parse(localStorage.getItem('shopCar'))


                shopCar.push(target)
                localStorage.setItem('shopCar', JSON.stringify(shopCar))

                that.count()
                that.view()
            })

        }

        removeItem(id) {
            console.log("删除事件")
            let arr = JSON.parse(localStorage.getItem('shopCar'))
            const index = arr.findIndex(function (item) {
                return item.id == id
            })

            arr.splice(index, 1)

            localStorage.setItem('shopCar', JSON.stringify(arr))

            this.count()
            this.view(id)
        }

        view(delId = null) {

            // 渲染底部
            $('.shop-car ul').text('')

            let arr = JSON.parse(localStorage.getItem('shopCar'))
            arr.map(function (item) {
                $('.shop-car ul').append(`
                <li data-id="${item.id}">
                    <div class="left"><img src="./img/${item.src}" alt=""></div>
                    <div class="center">${item.title}</div>
                    <div class="right"><i class="fa fa-times" aria-hidden="true"></i></div>
                </li>
                `)
            })



            // 渲染页面主题内容


            if (arr.length > 0) {


                // 删除
                if (delId != null) {
                    console.log('删除id', delId)
                    // 给需要删除的id添加类
                    let btn = $('.item-products button')
                    $(btn[delId - 1]).children('span').children('i').addClass('visibility')


                    $(btn[delId - 1]).css('background', 'black')
                    console.log('变黑')

                } else {
                    // 打钩
                    console.log('初始化刷新')
                    let btn = $('.item-products button')
                    // 添加
                    arr.map(function (item) {
                        console.log(item.id)


                        $(btn[item.id - 1]).children('span').children('i').removeClass('visibility')
                        $(btn[item.id - 1]).css('background', '#cc1616')
                        console.log('变红')
                    })
                }
            } else {
                // 清空
                console.log("删除全部")
                let btn = $('.item-products button')

                for (const item of btn) {
                    console.log('变黑')
                    $(item).css('background', 'black')


                    $(item).children('span').children('i').addClass('visibility')
                }

            }



            // 添加事件
            let list = $('.shop-car ul li')

            $('.shop-car ul li').map(function (item) {
                $(list[item]).children('.right').click(function () {
                    let id = $(list[item]).attr('data-id')
                    sc.removeItem(id)

                    // 这里删除后，重新渲染了，所以没有点击方法
                    // console.log(id)
                })
            })




            this.isNullView()

        }



        count() {
            let count = 0
            let arr = JSON.parse(localStorage.getItem('shopCar'))
            if (arr != []) {
                count = arr.length
            }
            $('.buy .count').text(count)

        }

        clear() {
            localStorage.setItem('shopCar', JSON.stringify([]))
            this.count()
            this.view()
        }
    }

    let sc = new ShopCar()



    $('.item-products ul li button').click(function () {
        // 增加或删除
        let i = $(this).children('span').children('i')
        i.toggleClass('visibility')
        let id = $(this).attr('data-id')

        let arr = JSON.parse(localStorage.getItem('shopCar'))
        if (!i.hasClass('visibility')) {
            // 增加
            if (arr.length < 5) {
                sc.addItem(id)

            } else {
                i.toggleClass('visibility')
                toastr.warning("max is 5!");
            }


        } else {
            // 删除
            sc.removeItem(id)
        }


    })



    $('.shop-car .clear').click(function () {
        sc.clear()
    })
})




// index swiper

var mySwiper = new Swiper('.swiper-index', {
    // direction: 'vertical', // 垂直切换选项
    autoplay: true,//等同于以下设置
    loop: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination',
        currentClass: 'my-pagination-current',//分式类型分页器的当前索引的类名
    },


    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },


})

let config = {}
if ($(document).width() > 1213) {
    config = {
        loop: false, // 循环模式选项
        slidesPerView: 3,
        // 如果需要分页器
        // pagination: {
        //   el: '.swiper-pagination',
        // },

        spaceBetween: 30,


        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    }
} else {
    config = {
        loop: false, // 循环模式选项
        slidesPerView: 1,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },


        on: {
            slideChangeTransitionStart: function () {
                console.log(this.activeIndex);
                let count = $('.swiper-slide').length
                $('#index-count').text(`${this.activeIndex + 1}/${count}`)
            },
        },
    }
}

let count = $('.swiper-slide').length
// 初始化设置swiper个数
$('#index-count').text(`1/${count}`)

var mySwiper = new Swiper('.swiper-products-details', config)

$('.productsDetails-article .swiper-products-details .swiper-slide img').hover(function () {
    let src = $(this).attr('src')
    let pic = $('.productsDetails-article .details section.left .img > img')
    let pic2 = $('.productsDetails-article .details section.left .img .big img')

    pic.attr('src', src)
    pic2.attr('src', src)

})



// 分页

//总页数
var total = 20;
$(function () {
    //页面初始化调用 生成页码
    makePage(total, 1);
});
//生成页码函数
function makePage(total, page) {
    var pageHtml = '';
    //点点点的html
    var ddd = '<span class="fy-d"></span><span class="fy-d"></span><span class="fy-d"></span>';
    function createPage(index) { //单页码生成
        if (page == index) {
            //当前页(或选中)样式 多了个selected(换背景色字体色的)
            pageHtml += '<span class="fy-y selected" >' + page + '</span>';
        } else {
            pageHtml += '<a  class="fy-y" onclick="pageClick(this)">' + index + '</a>';
        }
    }

    if (total <= 10) {//总页数小于10
        for (var i = 1; i <= total; i++) {
            //正常生成排列
            createPage(i);
        }
    } else {
        if (page <= 4) { //总页数大于10且当前页远离总页数(小于4)
            for (var i = 1; i <= 4 + 1; i++) {//显示1-5
                createPage(i);
            }
            //三个点...
            pageHtml += ddd;
            //三个点后面 生成最后一个页数
            createPage(total);

        } else if (page > total - 4) { //总页数大于10且当前页接近总页数(大于总页数-4)
            //第一页
            createPage(1);
            //三个点...
            pageHtml += ddd;
            //生成最后5个页数
            for (var i = total - 4; i <= total; i++) {
                createPage(i);
            }
        } else {  //除开上面两个情况 当前页在中间
            //页数1
            createPage(1);
            //三个点...
            pageHtml += ddd;
            //生成当前页和 前跟后一个页数
            for (var i = page - 1; i <= page + 1; i++) {
                createPage(i);
            }
            //三个点...
            pageHtml += ddd;
            //最后一个页数
            createPage(total);
        }
    }

    if (page > 1 && total > 1) { // 上一页
        pageHtml = '<a href="#start" class="previous" onclick="first()">First</a>' + '<a href="#-1" class="previous" onclick="previous()">Prev</a>' + pageHtml;
    } else {
        pageHtml = '<a href="#start" class="previous">First</a>' + '<a href="#-1" class="previous">Prev</a>' + pageHtml;
    }
    if (page < total && total > 1) { // 下一页
        pageHtml += '<a href="#+1" class="next" onclick="next()">Next</a>' + '<a href="#end" class="next" onclick="last()">Last</a>';
    } else {
        pageHtml += '<a href="#+1" class="next">Next</a>' + '<a href="#end" class="next" onclick="last()">Last</a>';
    }

    // 页码
    pageHtml += `<span class="fy-count">${page}/${total}</span>`
    //赋值生成html
    $('.rb_bottom').html(pageHtml);


    // 设置上下页按钮颜色
    console.log('宽度', document.documentElement.clientWidth)
    if (document.documentElement.clientWidth > 700) {

        // if (page == 1) {
        //     document.querySelectorAll(".previous")[0].setAttribute('style', 'color: #d5d5d5')
        //     document.querySelectorAll(".previous")[1].setAttribute('style', 'color: #d5d5d5')
        // }
        // if (page == total) {
        //     document.querySelectorAll(".next")[0].setAttribute('style', 'color: #d5d5d5')
        //     document.querySelectorAll(".next")[1].setAttribute('style', 'color: #d5d5d5')

        // }
    }


}
//首页点击事件
function first() {
    //获取当前页

    makePage(total, 1);
}

//末页点击事件
function last() {
    //获取当前页

    makePage(total, total);
}

//上一页点击事件
function previous() {
    //获取当前页
    var page = $('.rb_bottom>.selected').text();
    if (page <= 1) {
        return;
    }
    makePage(total, page - 1);
}
//下一页点击事件
function next() {
    //获取当前页
    var page = $('.rb_bottom>.selected').text();
    if (page >= total) {
        return;
    }
    makePage(total, page * 1 + 1);
}
//直接点击页数事件
function pageClick(that) {
    var page = $(that).html();
    makePage(total, page * 1);
}


